<template>
    <view class="user" :style="[background]">
        <view class="header">
            <!-- #ifndef  H5 -->
            <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
                <u-navbar
                    :is-back="false"
                    title="我的"
                    :is-fixed="false"
                    :border-bottom="false"
                    :background="navBackground"
                    :title-color="'#fff'"
                ></u-navbar>
            </u-sticky>
            <!-- #endif -->
            <view class="user-info row-between">
                <view class="info row">
                    <image
                        class="avatar mr20 flexnone"
                        @tap="goLogin"
                        :src="isLogin ? userInfo.avatar : `${imgPrefix}/images/xcxweb/user/default_avatar.png`"
                    ></image>
                    <view class="white" v-if="isLogin">
						<!-- is_distribution 是否大熊猫，1是，0否 -->
                        <view class="name xxl line1">{{ userInfo.is_distribution == 1 ? '大熊猫' : '小熊猫'}}</view>
						<!-- 大熊猫时才显示等级卡包等级 -->
                        <view class="user-id row-between" v-if="userInfo.is_distribution == 1">
							美食卡包LV{{ userInfo.user_card_lv }}
                            <!-- <view class="xs white ml20 mr20">会员ID: {{ userInfo.sn || '' }}</view> -->
                           <!-- <view class="xs normal copy-btn row-center ml5" @tap.stop="onCopy"
                                >复制</view
                            > -->
                        </view>
                    </view>
                    <view class="white" v-else @tap="goLogin">
                        <view style="font-size: 40rpx;margin-bottom: 10rpx;">点击登录</view>
                        <view class="sm">登录体验更多功能</view>
                    </view>
                </view>
                <view class="row" style="align-self: flex-start">
                    <view class="user-opt" @tap="goPage('/bundle/pages/user_profile/user_profile')">
                        <image
                            style="width: 58rpx; height: 58rpx"
                            :src="`${imgPrefix}/images/xcxweb/icon_my_setting.png`"
                        ></image>
                    </view>
                </view>
            </view>
        </view>
		
		<!-- is_buy_card_case  '是否购买卡包0 否1是', -->
		<!-- 未购买卡包 -->
		<view class="buy-card-box" @tap="handleBuyCard" v-if="userInfo.is_buy_card_case != 1">
			<image :src="`${imgPrefix}/images/xcxweb/user/buy_card.png`" />	
			<view class="txt1">购买卡包可以获得</view>
			<view class="txt2">每月补贴 <text>|</text>邀请送玉竹<text>|</text>消费返金竹<text>|</text>金竹兑现</view>
		</view>
		
		<!-- <view class="my-assets bg-white">
            <view class="title row lg">我的资产</view>
            <view class="nav row">
                <view
                    class="column-center mb20 assets-item"
                    @tap="goPage('/bundle/pages/user_wallet/user_wallet')"
                >
                    <view class="xl primary">{{ userInfo.user_money }}</view>
                    <view class="sm">余额</view>
                </view>
                <view
                    class="column-center mb20 assets-item"
                    @tap="goPage('/bundle/pages/user_sign/user_sign')"
                >
                    <view class="xl primary">{{ userInfo.user_integral }}</view>
                    <view class="sm">积分</view>
                </view>
                <view
                    class="column-center mb20 assets-item"
                    @tap="goPage('/pages/user_coupon/user_coupon')"
                >
                    <view class="xl primary">{{ userInfo.coupon }}</view>
                    <view class="sm">优惠券</view>
                </view>
            </view>
        </view> -->
		<!-- 我的金库： 购买了卡包才显示-->
		<view class="my-vault-box" v-if="userInfo.is_buy_card_case == 1">
		    <view class="hd row-between">
		      <text class="tit">我的金库</text>
		      <view class="details-link row" @tap="goPage('/bundle/pages/vault_details/vault_details')">
				  明细
				  <image :src="`${imgPrefix}/images/xcxweb/user/right_arrow.png`" />
			   </view>
		    </view>
			<view class="bd">
				<view class="tit-box row-center">
				  <view class="item" :class="activeIndex == 0 ? ' active' : ''" @tap="handleNav(0)">
					金竹子:{{ userInfo.golden_bamboo }}根
				  </view>
				  <view class="item"  :class="activeIndex == 1 ? ' active' : ''" @tap="handleNav(1)">
				   玉竹子:{{ userInfo.silver_bamboo }}根
				  </view>
				</view>
				<!-- 金竹子 -->
				<view class="status-box row-center" v-if="activeIndex == 0">
					  <view class="status-item">
						<text class="status-value">{{ userInfo.boobam_info.can_cash }}</text>
						<text class="status-label">可兑现</text>
					  </view>
					  <view class="status-item">
						<text class="status-value">{{ userInfo.boobam_info.already_cash }}</text>
						<text class="status-label">已兑现</text>
					  </view>
					  <view class="status-item">
						<text class="status-value">{{ userInfo.boobam_info.exchanging_cash }}</text>
						<text class="status-label">兑现中</text>
					  </view>
				</view>
				<!-- 玉竹子 -->
				<view class="status-box row-center" v-if="activeIndex == 1">
					<view @tap="handleExchange">
						<text class="exchange-tit">去兑换商品</text>
						<u-icon name="arrow-rightward" color="#369D9F" size="30"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- is_buy_card_case  '是否购买卡包0 否1是', -->
        <!-- 购买了卡包，升级 -->
        <button :open-type="inviteOpenType" class="column column-center" hover-class="none" v-if="userInfo.is_buy_card_case == 1"  @tap="handleInvite">
        	<view class="upgrade-box">
        		<image :src="`${imgPrefix}/images/xcxweb/user/upgrade.png`" />
        	</view>
        </button>
		<view class="order-nav bg-white">
            <view class="title row-between" @tap="goPage('/pages/user_order/user_order')">
                <view class="tit-txt">我的订单</view>
                <view class="all-txt row">
                    全部订单
                    <image class="icon-sm ml10" :src="`${imgPrefix}/images/xcxweb/user/right_arrow_s.png`"></image>
                </view>
            </view>
            <view class="nav row">
                <view
                    class="item column-center mb20"
                    @tap="goPage('/pages/user_order/user_order?type=pay')"
                >
                    <view class="icon-contain">
                        <view v-if="userInfo.wait_pay" class="badge xs row-center bg-white">
                            {{ userInfo.wait_pay }}
                        </view>
                        <image class="nav-icon" :src="`${imgPrefix}/images/xcxweb/user/order1.png`"></image>
                    </view>
                    <view class="nr mt10">待付款</view>
                </view>
                <view
                    class="item column-center mb20"
                    @tap="goPage('/pages/user_order/user_order?type=delivery')"
                >
                    <view class="icon-contain">
                        <view v-if="userInfo.wait_delivery" class="badge xs row-center bg-white">
                            {{ userInfo.wait_delivery }}
                        </view>
                        <image class="nav-icon mb10" :src="`${imgPrefix}/images/xcxweb/user/order2.png`"></image>
                    </view>
                    <view class="nr">待发货</view>
                </view>
                <view
                    class="item column-center mb20"
                    @tap="goPage('/pages/user_order/user_order?type=delivery')"
                >
                    <view class="icon-contain">
                        <view v-if="userInfo.wait_take" class="badge xs row-center bg-white">
                            {{ userInfo.wait_take }}
                        </view>
                        <image class="nav-icon" :src="`${imgPrefix}/images/xcxweb/user/order3.png`"></image>
                    </view>
                    <view class="nr mt10">待收货</view>
                </view>
				<view
				    class="item column-center mb20"
				    @tap="goPage('/pages/user_order/user_order?type=finish')"
				>
				    <view class="icon-contain">
				        <view v-if="userInfo.finish_take" class="badge xs row-center bg-white">
				            {{ userInfo.finish_take }}
				        </view>
				        <image class="nav-icon" :src="`${imgPrefix}/images/xcxweb/user/order4.png`"></image>
				    </view>
				    <view class="nr mt10">已完成</view>
				</view>
            </view>
        </view>
		<view class="server-nav bg-white" v-if="serviceList && serviceList.length > 0">
		    <view>
		        <view class="title row-between">
		            <view class="tit-txt">我的服务</view>
		        </view>
		    </view>
		    <view class="nav row wrap">
		        <button
		            v-for="(item, index) in serviceList"
		            :key="index"
		            class="item column-center mb20"
		            hover-class="none"
		            :open-type="item.link_type == 3 ? 'contact' : ''"
		            @tap="tapMenu(item)"
		            style="width: 25%"
		        >
		            <image class="nav-icon" :src="item.image"></image>
		            <view class="sm mt10">{{ item.name }}</view>
		        </button>
		    </view>
		</view>
		
        <!-- <view class="server-nav bg-white" v-if="menuList && menuList.length > 0">
            <view>
                <view class="title row-between">
                    <view class="lg">我的功能</view>
                </view>
            </view>
            <view class="nav row wrap">
                <button
                    v-for="(item, index) in menuList"
                    :key="index"
                    class="item column-center mb20"
                    hover-class="none"
                    :open-type="item.link_type == 3 ? 'contact' : ''"
                    @tap="tapMenu(item)"
                    style="width: 25%"
                >
                    <image class="nav-icon" :src="item.image"></image>
                    <view class="sm mt10">{{ item.name }}</view>
                </button>
            </view>
        </view> -->
    </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getUser } from '@/api/user'
import { getMenu, getCard, cardOrder, payment } from '@/api/store'
import { toLogin, wxMnpLogin } from '@/utils/login'
import { menuJump, copy, setTabbar } from '@/utils/tools'
import Cache from '@/utils/cache'
import { baseURL } from "@/config/app"

const app = getApp()
export default {
    data() {
        return {
            showNav: false,
            navH: 0,
            navBg: 0,
            menuList: [],
            statusBarH: '',
			cardInfo: {},
			cardOrderInfo: {},
			serviceList: [
				{
					image: `${baseURL}/images/xcxweb/user/service1.png`,
					is_tab: 0,
					link: "/pages/user_collection/user_collection",
					link_type: 1,
					name: "收藏"
				},
				{
					image: `${baseURL}/images/xcxweb/user/service2.png`,
					is_tab: 0,
					link: "/bundle/pages/user_profile/user_profile",
					link_type: 1,
					name: "设置"
				},
				{
					image: `${baseURL}/images/xcxweb/user/service3.png`,
					is_tab: 0,
					link: "/bundle/pages/my_invite/my_invite",
					link_type: 1,
					name: "我的邀请"
				},
			],
			goldBamboo: 300,
		    jadeBamboo: 10,
		    redeemable: 150,
		    redeemed: 150,
		    redeeming: 150,
			activeIndex: 0,
			imgPrefix: baseURL,
			inviteOpenType: '',
			is_buy_card_case: '', // 是否购买卡包，0 否 1是
        }
    },

    components: {},
    props: {},

    onLoad(options) {
        // setTabbar()
        this.getMenuFun()
    },

    onShow() {
       console.log('this.inviteOpenType', this.inviteOpenType)
	   if(this.isLogin){
		   this.getUser().then((data) => {
		    console.log('getUser-data:', data)
		    if(data){
		   	 this.is_buy_card_case = data.is_buy_card_case;
		   	 console.log('是否购买卡包:', this.is_buy_card_case)
		   	 if(data.is_buy_card_case == 1){ // 购买了卡包才可以分享
		   		 this.inviteOpenType = 'share'
		   		 console.log('this.inviteOpenType', this.inviteOpenType)
		   	 }
		    }
		   })
	   }  
    },
    onPageScroll(e) {
        const top = uni.upx2px(100)
        const { scrollTop } = e
        let percent = scrollTop / top > 1 ? 1 : scrollTop / top
        this.navBg = percent
    },

    onUnload() {},
    onPullDownRefresh() {
        this.getUser().then(() => {
            uni.stopPullDownRefresh()
        })
        this.getMenuFun()
    },
    onShareAppMessage() {		
		console.log(this.inviteCode)
		const shareInfo = Cache.get('shareInfo')
		console.log('是否购买卡包:', this.is_buy_card_case)
		let path = 'pages/user/user'
		if(this.is_buy_card_case == 1){ // 购买了卡包
			path = 'pages/user/user?invite_code=' + this.inviteCode
		}
		return {
		    title: shareInfo.mnp_share_title,
			path: path,
		    imageUrl: shareInfo.mnp_share_image
		}
    },
    methods: {
        ...mapActions(['getUser']),
        goLogin() {
			console.log('去登录', this.isLogin)
            let { isLogin } = this
            if (isLogin) {
                uni.navigateTo({
                    url: '/bundle/pages/user_set/user_set'
                })
                return
            }
            toLogin()
        },

        goPage(url) {
            if (!this.isLogin) return toLogin()
            uni.navigateTo({
                url
            })
        },
        tapMenu(item) {
            if (!this.isLogin) return toLogin()
            console.log(item)
            menuJump(item)
        },
        async getMenuFun() {
            const { data, code } = await getMenu({
                type: 2
            })
            if (code == 1) {
                this.menuList = data
            }
        },
		handleNav(index){
			this.activeIndex = index
		},
		handleExchange(){
			console.log('兑换商品')
			uni.navigateTo({
				url: `/pages/goods_search/goods_search?productType=1`
			})
		},
		handleInvite(){
			console.log('是否购买卡包:', this.is_buy_card_case)
			console.log('this.inviteOpenType', this.inviteOpenType)
			
			if(!this.is_buy_card_case){ // 未购买卡包
				this.$toast({
					title: '请先前往购买卡包'
				})
			}else{
				// this.showShareBtn = true
			}
		},
		// 购买卡包
		handleBuyCard(){
			if (!this.isLogin) return toLogin()
			
			uni.$on('cardPayment', (params) => {
			    setTimeout(() => {
			        uni.$off('cardPayment')
					console.log('卡包params-result：', params)
					if (params.result) {
						console.log('跳转卡包页', params.result)
					    uni.switchTab({
					    	url: `/pages/card/card`,
							success(res){
								console.log('跳转卡包页面成功', res)
							},
							fail(err) {
								console.log('跳转卡包页面失败', err)
							}
					    })
						// this.$toast({ title: "购买成功" })
					} else {
					   console.log('跳转我的页面', params.result)
					   uni.switchTab({
							url: `/pages/user/user`,
							success(res){
								console.log('跳转我的页面成功', res)
							},
							fail(err) {
								console.log('跳转我的页面失败', err)
							}
					   })
					   // this.$toast({ title: "支付失败" })
					}
			    }, 500)
			})
			
			this.getCardFun()
		},
		// 获取卡包信息
		async getCardFun() {
		    const { data, code } = await getCard()
		    if (code == 1) {
		        this.cardInfo = data[0]
				this.cardOrderFun()
		    }
		},
		// 购买卡包下单接口
		async cardOrderFun() {
		    const { data, code } = await cardOrder({
				id: this.cardInfo.id // 卡包ID
			})
		    if (code == 1) {
		        this.cardOrderInfo = data
				console.log('this.cardOrderInfo', this.cardOrderInfo)
				
				let  { money } = this.cardInfo
				let  { id } = this.cardOrderInfo
				
				// form: card 卡包购买
				// pay_way: 1 微信支付
				
				uni.redirectTo({
				    url: `/pages/payment/payment?from=card&order_id=${id}&pay_way=1&totalAmount=${money*1}`
				})
				// this.paymentFun()
		    }
		},
		// 卡包订单支付
		async paymentFun() {
			let params = {
				from: 'card', // 订单类型: card(卡包购买), order(商品订单)
				order_id: this.cardOrderInfo.id, // 下单返回的主键ID
				pay_way: 1 // 支付方式： 1（微信) 2（支付宝） 3（玉竹兑换
			}
		    const { data, code } = await payment(params)
			console.log('data,code', data, code)
		    if (code == 1) {
		        this.$toast({
					title: '支付成功'
				})
				this.getUser()
		    }
		},
        onCopy(e) {
            copy(this.userInfo.sn)
        }
    },
    computed: {
        ...mapGetters(['userInfo', 'inviteCode', 'appConfig']),
        background() {
			const { isLogin } = this
			const { is_buy_card_case, user_card_lv } = this.userInfo
			console.log('user_card_lv', user_card_lv)

			
			let resultBg = {}
			console.log('isLogin--', isLogin)
			if(isLogin){
				console.log('已登录')
				console.log('是否购买卡包：', is_buy_card_case)
				console.log('卡包等级：', user_card_lv)
				if(is_buy_card_case == 1){ // 购买了卡包
					if(user_card_lv*1 >= 8){ // 等级大于等于8
						resultBg = {
						      // 'background-image': `url(${baseURL}/images/xcxweb/user/user_bg2.png)`
						}
					}else{
						resultBg = {
						      'background-image': `url(${baseURL}/images/xcxweb/user/user_bg1.png)`
						}
					}
				}else{
					console.log('没有购买卡包')
					resultBg = {
					       'background-image': `url(${baseURL}/images/xcxweb/user/no_buy_card_bg.png)`
					}
				}
			}else{
				console.log('未登录')
				resultBg = {
                      'background-image': `url(${baseURL}/images/xcxweb/user/no_login_bg.png)`
                }
			}
			
			return resultBg
        },
		navBackground(){
			let resultBg = {}
			if(this.navBg > 0.5){
				resultBg = {
					backgroundImage:  `linear-gradient(90deg,  #569496 0%, #366667 100%)`
				}
			}
			return resultBg;
		}
    }
}
</script>
<style lang="scss">
.user {
    background-size: 100% 724rpx;
    background-repeat: no-repeat;
	padding-bottom: 0;
	padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)); 
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); 
    .header {
        display: flex;
        flex-direction: column;
        // height: 420rpx;
        .user-info {
            padding: 10rpx 30rpx;
            //#ifdef  H5
            padding-top: 90rpx;
            //#endif
            .avatar {
                height: 166rpx;
                width: 166rpx;
				border: 4rpx solid #fff;
                border-radius: 50%;
                overflow: hidden;
				box-sizing: border-box;
				box-shadow: 0rpx 4rpx 14rpx 0rpx #186B6E;
            }
            .name {
                text-align: left;
                margin-bottom: 5rpx;
                max-width: 400rpx;
				font-weight: 700;
				font-size: 40rpx;
				color: #26375E;
				line-height: 58rpx;
            }

            .user-id {
                // border: 1px solid white;
                border-radius: 100rpx;
				font-weight: 700;
				font-size: 38rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-shadow: 0px 4px 4px rgba(13,76,89,0.57);

                .copy-btn {
                    background-color: #ffdfda;
                    height: 40rpx;
                    width: 90rpx;
                    border-radius: 100rpx;
                }
            }

            .user-opt {
                position: relative;

                .dot {
                    position: absolute;
                    background-color: #ee0a24;
                    border: 2rpx solid #ffffff;
                    color: $-color-primary;
                    border-radius: 100%;
                    top: 6rpx;
                    right: 0rpx;
                    font-size: 22rpx;
                    min-width: 16rpx;
                    height: 16rpx;
                }
            }

            .buyer-type {
                background-color: #ffa200;
                height: 38rpx;
                padding: 0 10rpx;
            }
        }
        .member {
            flex: 1;
            padding: 0 20rpx;
            .member-entery {
                color: #ffe0a1;
                padding: 0 16rpx;
                width: 100%;
                height: 80rpx;
                background: url(#{$img_prefix}/images/xcxweb/bg_member_grade.png);
                background-size: 100%;
            }
        }
    }

    .upgrade-box{
		margin: 0 20rpx 0;
		image{
			display: block;
			width: 710rpx;
			height: 166rpx;
		}
	}
	
	.buy-card-box{
		position: relative;
		margin: 30rpx 20rpx 0;
		image{
			display: block;
			width: 714rpx;
			height: 170rpx;
		}
		.txt1{
			position: absolute;
			left: 30rpx;
			top: 32rpx;
			font-weight: 700;
			font-size: 36rpx;
			color: #2F8E90;
			line-height: 52rpx;
		}
		.txt2{
			position: absolute;
			left: 30rpx;
			bottom: 32rpx;
			font-size: 24rpx;
			color: #586F70;
			line-height: 34rpx;
			font-weight: 500;
			text{
				margin: 0 10rpx;
			}
		}
	}
	
	.my-vault-box {
	  padding: 20rpx;
	  background: url(#{$img_prefix}/images/xcxweb/user/valut_box_bg.png) no-repeat;
	  background-size: 100% 100%;
	  margin: 30rpx 20rpx 30rpx; 
	  .hd {
	    margin-bottom: 20rpx;
		.tit {
		 font-weight: 500;
		 font-size: 32rpx;
		 color: #FFFFFF;
		 line-height: 46rpx;
		}
		
		.details-link {
			    font-weight: 400;
			    font-size: 28rpx;
			    color: #FFFFFF;
				image{
					width: 32rpx;
					height: 32rpx;
					margin-left: 16rpx;
				}
		}
	  }
	  
	  .bd{
		  border-radius: 10rpx;
	  }
	
	  .tit-box {
		.item {
		 flex: 1;
		 font-size: 28rpx;
		 color: #FFFFFF;
		 line-height: 40rpx;
		 background: transparent;
		 padding: 20rpx 0;
		 text-align: center;
		 background: rgba(255, 255, 255, 0.2);
		 &.active{
			 color: #2E8688;
			 font-weight: 500;
			 background: #E0FEFF;
		 }
		 &:nth-child(1){
			 border-radius: 12rpx 0 0 0;
		 }
		 &:nth-child(2){
		 	border-radius: 0 12rpx 0 0;
		 }
		}
	  }
	  
	  
	  .status-box {
	    padding: 50rpx 0 50rpx;
		background: linear-gradient( 180deg,  #E0FEFF  0%,  #FFFFFF 100%);
		border-radius: 0 0 12rpx 12rpx;
		height: 220rpx;
		.exchange-tit{
			font-size: 30rpx;
			color: #369D9F;
			text-decoration: underline;
			margin-right: 12rpx;
		}
	  }
	  
	  .status-item {
		flex: 1;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	  }
	  .status-value {
		  font-weight: 700;
		  font-size: 50rpx;
		  color: #1F6B74;
		  line-height: 56rpx;
	  }
	  
	  .status-label {
		margin-top: 6rpx;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	  }
	}
	
	.order-nav {
        .icon-contain {
            position: relative;
        }
    }

    .order-nav,
    .my-assets {
        margin: 30rpx 20rpx 0;
        border-radius: 16rpx;
    }

    .server-nav {
        margin: 30rpx 20rpx 0;
        border-radius: 16rpx;
    }

    .title {
        height: 88rpx;
        padding: 0 30rpx;
        // border-bottom: $-dashed-border;
		.tit-txt{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 46rpx;
		}
		.all-txt{
			font-size: 28rpx;
			color: #366667;
			line-height: 40rpx;
		}
    }

    .nav {
        padding: 26rpx 0 10rpx;

        .assets-item {
            flex: 1;
        }

        .item {
            width: 25%;
			color: #333;
        }

        .badge {
            padding: 0 6rpx;
            min-width: 28rpx;
            height: 28rpx;
            border-radius: 28rpx;
            box-sizing: border-box;
            border: 1rpx solid $-color-primary;
            color: $-color-primary;
            position: absolute;
		    left: 42rpx;
		    top: -8rpx;
		    z-index: 2;
        }

        .nav-icon {
            width: 68rpx;
            height: 68rpx;
        }
    }
}
</style>
